<template>
    <div>
      <div class="buttoncover">
        <div class="button" @click="turntopage(1)"><</div>
      </div>

      <div v-for="item in list"  class="buttoncover">
        <div class="button_disable" v-if="item===page">{{item}}</div>
        <div class="button" v-else @click="turntopage(item)">{{item}}</div>
      </div>

      <div class="buttoncover">
        <div class="button" @click="turntopage(Math.ceil(total/5))">></div>
      </div>

    </div>
</template>

<script>
    export default {
        name: 'PageSelector',
        props: ['page','total'],
        components: {},
        data() {
            return {
              list:[],
            }
        },
        methods: {
          turntopage(i){
            this.$emit('turnto',i);
//            this.update();
//            this.$router.push({name:'page',params:{page:i}})
          },
          update(){
            this.list=[];
            for(let i=this.page-1;i>=1&&this.page-i<3;i--){
              this.list.unshift(i);
            }

            for(let i=this.page;
                i<=Math.ceil(this.total/5)&&i-this.page<3;
                i++)
            {
              this.list.push(i);
            }
//            console.log(this.list);
          }
        },
        created() {

        },
        mounted() {
          this.update();
        },
        computed:{
        },
        watch:{
          page:function(){
            this.update();
          },
          total:function(){
//            console.log('total'+this.total);
            this.update();
          }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.buttoncover{
  /*display: inline-flex;*/
  /*flex:1;*/
  margin:2px;
  width:30px;
  height:30px;
  line-height: 30px;
  border:1px solid #e8e8e8;
  border-radius:5px;
}
  .button{
    width:100%;
    height:100%;
    background: #ffffff;
    cursor:pointer;
    border-radius:5px;
  }
  .button_disable{
    width:100%;
    height:100%;
    background: #76b0fb;
    border-radius:5px;
  }
</style>
